<script lang="ts" setup>
import { ref, watch } from 'vue'

const props = defineProps<{
  dict: string
  value: string | number
  default?: string
}>()

const label = ref(props.default)
const promiseDebounce = uni.$usePromiseDebounce()

watch(props, async (_props) => {
  label.value = await promiseDebounce(uni.$useDict(
    _props.dict,
    _props.value,
    { default: _props.default }
  ))
}, { immediate: true })
</script>

<template>
  <slot :label="label">{{ label }}</slot>
</template>
